<script lang="jsx" setup>
import { onMounted, ref } from 'vue';
import { useRouteQuery } from '@vueuse/router';
import { get } from '@/service/api/api';
import ProcessInformation from './modules/process-information.vue';
import EngineeringInstruction from './modules/engineering-instruction.vue';
import ProductionTools from './modules/production-tools.vue';
import ProcessEngineeringDocument from './modules/process-engineering-document.vue';
import EngineeringDocument from './modules/engineering-document.vue';
import EngineeringDrawing from './modules/engineering-drawing.vue';

const prodData = ref(null);
const prodId = useRouteQuery('prodId');
onMounted(() => {
  prodData.value = JSON.parse(sessionStorage.getItem('mi-data'))[prodId.value];
  console.log('prodData.value', prodData.value);
});

const activeKey = ref('1');

const tabList = [
  { key: '1', tab: '流程信息', icon: 'icon-gongyiliucheng' },
  { key: '2', tab: '工程指示', icon: 'icon-gongchengzhishi' },
  { key: '3', tab: '生产工具', icon: 'icon-shengchangongju' },
  { key: '4', tab: '工艺文件', icon: 'icon-gongyiwenjian' },
  { key: '5', tab: '工程文件', icon: 'icon-gongchengwenjian' },
  { key: '6', tab: '工程图纸', icon: 'icon-gongchengtuzhi' }
];

function handleClick(key) {
  activeKey.value = key;
}
// 工艺流程数据
const dataList = ref([]);
function getData() {
  get('/erpsyncmes/Mi/findPubtechnology', {
    prodId: prodId.value
  }).then(({ data, error }) => {
    if (!error) {
      data.forEach((item, index) => {
        item.dataIndex = index + 1;
      });
      dataList.value = data;
      console.log('dataList.value', dataList.value);
    }
  });
}
getData();
</script>

<template>
  <div class="h-full w-full flex p-10px">
    <div class="left-tabs">
      <div class="tab-list">
        <div
          v-for="item in tabList"
          :key="item.key"
          class="tab-item"
          :class="{ active: activeKey === item.key }"
          @click="handleClick(item.key)"
        >
          <span class="iconfont" :class="item.icon"></span>
          {{ item.tab }}
        </div>
      </div>
    </div>

    <div class="cotent h-full">
      <ProcessInformation
        v-show="activeKey === '1'"
        :prod-id="prodId"
        :module-data="prodData"
        :process-list="dataList"
      />

      <EngineeringInstruction
        v-show="activeKey === '2'"
        :prod-id="prodId"
        :module-data="prodData"
        :process-list="dataList"
      />

      <ProductionTools v-show="activeKey === '3'" :prod-id="prodId" :module-data="prodData" :process-list="dataList" />

      <ProcessEngineeringDocument
        v-show="activeKey === '4'"
        :prod-id="prodId"
        :module-data="prodData"
        :process-list="dataList"
      />

      <EngineeringDocument v-show="activeKey === '5'" :module-data="prodData" />

      <EngineeringDrawing v-show="activeKey === '6'" :module-data="prodData" />
    </div>

    <div class="basic-information w-280px">
      <ACard size="small">
        <template #title>
          <div class="card-title">基础信息</div>
        </template>
        <div class="basic-information-body">
          <div class="basic-information-list">
            <div class="basic-information-item">
              <div class="basic-information-label">生产型号</div>
              <div class="basic-information-value" :title="prodData?.moduleNo">{{ prodData?.moduleNo }}</div>
            </div>

            <div class="basic-information-item">
              <div class="basic-information-label">终端客户型号</div>
              <div class="basic-information-value" :title="prodData?.targetProdNo">{{ prodData?.targetProdNo }}</div>
            </div>
            <div class="basic-information-item">
              <div class="basic-information-label">客户型号</div>
              <div class="basic-information-value" :title="prodData?.custProdNo">{{ prodData?.custProdNo }}</div>
            </div>

            <div class="basic-information-item">
              <div class="basic-information-label">产品类型</div>
              <div class="basic-information-value" :title="prodData?.prodType">{{ prodData?.prodType }}</div>
            </div>

            <div class="basic-information-item">
              <div class="basic-information-label">开发等级</div>
              <div class="basic-information-value" :title="prodData?.peDifficulty">{{ prodData?.peDifficulty }}</div>
            </div>

            <div class="basic-information-item">
              <div class="basic-information-label">板上型号</div>
              <div class="basic-information-value" :title="prodData?.peTab">{{ prodData?.peTab }}</div>
            </div>

            <div class="basic-information-item">
              <div class="basic-information-label">板子特性</div>
              <div class="basic-information-value" :title="prodData?.features">{{ prodData?.features }}</div>
            </div>
          </div>
        </div>
      </ACard>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.left-tabs {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 166px;
  margin-right: 8px;
  border-radius: 8px;
  padding: 10px;
  .tab-list {
    .tab-item {
      padding: 10px;
      cursor: pointer;
      color: #333;
      font-size: 15px;
      font-weight: 500;
      transition: all 0.3s ease;
      border-radius: 8px;
      padding-left: 15px;
      margin-bottom: 5px;
      &:hover {
        background: #646cff;
        color: #fff;
      }
      &.active {
        background: #646cff;
        color: #fff;
      }
    }
  }
}

.cotent {
  width: calc(100% - 156px - 280px - 26px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-right: 8px;
  border-radius: 8px;
  padding: 10px;
}

.card-title {
  display: flex;
  align-items: center;
  &:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #646cff;
    margin-right: 5px;
  }
}

.basic-information-body {
  .basic-information-list {
    display: flex;
    flex-wrap: wrap;
    .basic-information-item {
      width: 100%;
      margin-bottom: 10px;
      display: flex;
      .basic-information-label {
        font-size: 15px;
        font-weight: 500;
        color: #333;
        margin-bottom: 5px;
        &:after {
          content: ':';
          margin: 0 5px;
        }
      }
      .basic-information-value {
        font-size: 14px;
        color: #646cff;
        font-weight: bold;
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
</style>
